<template>
    <div class="studentList">
        <!-- 查询、重置 -->
        <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                size="small">
            <el-form-item>
                <el-input
                        v-model="pagination.customerCode"
                        placeholder="请输入用户编号">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="find()">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border style="width: 100%">
            <el-table-column prop="customerCode" label="用户编号" align="center">
            </el-table-column>
            <el-table-column prop="customerName" label="用户姓名" align="center">
            </el-table-column>
            <el-table-column prop="identityCardNo" label="身份证号" align="center">
            </el-table-column>
            <el-table-column prop="mobilePhone" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="customerEmail" label="邮箱" align="center">
            </el-table-column>
            <el-table-column prop="gender" label="性别" align="center">
            </el-table-column>
            <el-table-column prop="state_text" label="状态" align="center">
            </el-table-column>
            <el-table-column   label="操作">
                <template slot-scope="scope">
                    <el-button :type="scope.row.userStats==1 ?'danger':'primary'" @click="setY(scope.row)" >{{ scope.row.userStats?'封禁':'解禁'}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="pagiantion"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total"
        >
        </el-pagination>
    </div>
</template>
<script>
    import {getCustMsgData} from "../../../api/api";
 import {updataCustomerStatus} from "../../../api/api";

    export default {
        data() {
            return {
                dataList: [],
                search: {},
                pagination: {
                    currentPage: 1, //当前页数
                    pageSize: 10, // 每页显示条数
                    total: 0, // 总条数
                    customerCode: "",
                    userStats:""
                },
                formInline: {
                    name: "",
                },
            };
        },
        created() {
            this.getData();
        },
        computed: {},
        methods: {
            find() {
                this.getData()
            },
            reset() {
                this.pagination.bussinessStatus = "",
                    this.pagination.bussinessName = "",
                    this.pagination.bussinessCode = ""
            },
            handleCurrentChange(currentPage) {
                //修改页码值为当前选中的页码值
                this.pagination.currentPage = currentPage;
                //执行查询
                this.getData();
            },
            getData() {
                console.log(this.pagination)
                getCustMsgData(this.pagination).then((res) => {
                    if (res.data.status === 200) {
                        console.log(res.data)
                        this.dataList = res.data.data.records;
                        this.pagination.total = res.data.data.total;
                        this.dataList.forEach((item) => {
                            // 尽量不要修改原数据
                            item.userStats == "0"
                                ? (item.state_text = "封禁")
                                : (item.state_text = "正常");
                        });
                    }
                });
            },
            setY(row) {
                if (row.userStats == 1) {
                    row.userStats = "0";
                    updataCustomerStatus(row).then((res) => {
                        if (res.data.status === 200) {
                            this.getData();
                        }
                    });
                } else {
                    row.userStats = "1";
                    updataCustomerStatus(row).then((res) => {
                        if (res.data.status === 200) {
                            this.getData();
                        }
                    });
                }
            }
        },
    };
</script>
<style lang="scss">
    .studentList {
        .demo-form-inline, .el-form-item {
            text-align: left;
        }

        .el-pagination {
            text-align: left;
            margin-top: 20px;
        }
    }
</style>
